跳到主要内容

CSS 流式布局

阐述

将元素分为「块元素」与「行内元素」,分别具有以下特点:

  • 块元素按块方向依次排列,行内元素按行内方向依次排列
  • 行内元素上不能设置宽度和高度,以使其和行高一致;但 CSS 可替换元素除外
  • 块元素默认占满行内方向的所有空间,即使设为 fit-content 别的元素也不会继续占据它所在的行的空间
  • 行内元素含有一些「魔法空间」,与它的行高成正比,这是为了让字在行之间有一定空隙
  • 行内元素之间的空格会渲染到文档中
  • 行内元素可以折行
  • 行内元素可以设成 inline-block,这使它的 width, margin-top 等属性有效,但不能折行

实例

性质

相关内容

参考文献